import React, { Component } from 'react';
import { Table, Space, Button, Form, Input, Modal, Breadcrumb, DatePicker, Pagination, Select } from 'antd';
import { MessageOutlined, EyeOutlined, AppstoreTwoTone } from '@ant-design/icons';
import { connect } from 'dva'
import styles from "./index.less"
import 'braft-editor/dist/index.css';
import BraftEditor from 'braft-editor';
// import CreateForm from './create'
const { RangePicker } = DatePicker
const { TextArea } = Input;
const { Option } = Select

@connect(() => ({}))
class ArticleListForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            optionMessage: [],
            total: 0,
            currentPage: 0,
            pageSize: 5,
            replyInput: "",
            editorState: BraftEditor.createEditorState(null),
            isModalVisible: false,
            loading: false,
            form: {
                author: "",
                startTime: "",
                endTime: "",
            },
            rangeTimeValue: "",
            data: [],//表数据
            softwareDetail: [],//编辑数据
            handleFlag: false
        }
    }
    componentDidMount() {
        this.getSoftWareList()
    }
    searchSoftWareList=()=>{
        this.setState({
            currentPage:1
        },()=>{
            this.getSoftWareList()
        })
    }
    // 获取列表
    getSoftWareList = () => {
        console.log(this.state.form)
        const { form, currentPage, pageSize } = this.state
        this.props.dispatch({
            type: "global/selectByPage",
            payload: {
                pageSize: pageSize,
                pageNum: currentPage === 0 ? 1 : currentPage,
                title: form.title,
                state: form.state
            }
        }).then(res => {
            console.log(res)
            if (res) {
                res.data.rows.map((item, index) => {
                    item.key = item.id
                })
                this.setState({
                    data: res.data.rows,
                    total: res.data.total
                })
            }
        })
    }
    //清空
    clearEvent = () => {
        this.setState({
            form: {},
        }, () => this.getSoftWareList())

    }
    //回复按钮
    reply = (record) => {
        this.props.dispatch({
            type: "global/handle",
            payload: {
                id: record.id
            }
        }).then(res => {
           
            this.getSoftWareList();
        })
    }
    handelReplyChange = (e) => {
        this.setState({
            replyInput: e.target.value
        })

    }
    //详情
    showModal = (record) => {
        this.props.dispatch({
            type: "global/selectById",
            payload: {
                id: record.id
            }
        }).then(res => {
            console.log(res)
            this.setState({
                isModalVisible1:true,
                optionMessage:res.data
            })
            this.getSoftWareList();
        })
    }
    //弹框确定按钮
    handleOk = () => {
        this.props.dispatch({
            type: "global/handle",
            payload: {
                handleInfo: "我假装传个信息",
                id: this.state.replyId
            }
        }).then(res => {
            this.setState({
                isModalVisible1: false,
                isModalVisible: false,
                opinionInfo: this.state.replyInput
            })
            this.getSoftWareList();
        })


    }
    //弹框取消按钮
    handleCancel = () => {
        this.setState({
            isModalVisible: false,
            isModalVisible1: false
        })
    }
    //条件查询
    stateChange = (value) => {
        this.setState({
            form: {
                ...this.state.form,
                state: value
            }
        })
    }
    handleTitleChange = (e) => {
        this.setState({
            form: {
                ...this.state.form,
                opinionInfo: e.target.value
            }
        })
    }
    //分页
    pageChange = (page, pageSize) => {
        console.log(page, pageSize)
        this.setState({ pageSize: pageSize, currentPage: page }, () => { this.getSoftWareList() })
    }
    //
    pageSizeChange = (current, size) => {
        // console.log(size)
        this.setState({ pageSize: size, currentPage: 1 }, () => { this.getSoftWareList() })
    }

    render() {
        let { data, isModalVisible, isModalVisible1, form, currentPage, modalTitle, softwareDetail, total, } = this.state;

        //表头数据  key唯一
        const columns = [
            {
                title: '编号',
                dataIndex: 'num',
                key: 'num',
                align: "center",
                width: 100,
                render: (text, record, index) => `${index + 1}`,
            },
            {
                title: '意见信息',
                dataIndex: 'title',
                align: "center",
                key: 'title',
            },

            {
                title: '发布人',
                dataIndex: 'submitUser',
                align: "center",
                key: 'submitUser',
                width: 200
            },
            {
                title: '提出时间',
                dataIndex: 'submitTime',
                align: "center",
                key: 'submitTime',
            },
            {
                title: '处理时间',
                dataIndex: 'handleTime',
                align: "center",
                key: 'handleTime',
            },

            {
                title: '操作',
                key: 'action',
                align: "center",
                render: (text, record) => (

                    <Space size="middle">
                        {
                            record.state === 1
                                ?
                                <div>
                                    <Button type="primary"
                                        icon={<MessageOutlined />}
                                        size="small" shape="round" disabled
                                        style={{ background: "#11bf94" }}
                                        onClick={this.reply}>已处理</Button>
                                </div>
                                :
                                <Button type="primary"
                                    icon={<MessageOutlined />}
                                    size="small" shape="round"
                                    style={{ background: "#11bf94" }}
                                    onClick={() => this.reply(record)}>处理</Button>
                        }


                        <Button type="primary" icon={<EyeOutlined />} size="small" shape="round" onClick={() => this.showModal(record)}>
                            查看
                         </Button>

                    </Space>
                ),
            },
        ];
        return (
            <div>
                <div className={styles.pagetop}>
                    <span className={styles.pageheader}>
                        <Breadcrumb>
                            <Breadcrumb.Item><AppstoreTwoTone />意见</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="/opinion">意见列表</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </span>
                </div>
                <div style={{ background: "white" }}>
                    <div className={styles.form}>
                        <Form
                            layout="inline"
                        >
                            <Form.Item
                                label="处理状态"
                            >
                                <Select placeholder="请选择处理状态" defaultValue="" value={form.state} onChange={this.stateChange} style={{ width: "200px" }}>
                                    <Option value="">无</Option>
                                    <Option value="1">已处理</Option>
                                    <Option value="2">未处理</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item
                                label="标题"
                            >
                                <Input
                                    placeholder="请输入标题"
                                    value={form.title}
                                    style={{ width: "200px" }}
                                    onChange={this.handleTitleChange}
                                />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" onClick={this.searchSoftWareList}>查询</Button>
                                <Button type="default" style={{ marginLeft: "10px" }} onClick={this.clearEvent}>清空</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <Table
                        columns={columns}
                        dataSource={data}
                        pagination={false}
                    />
                </div>
                <div className={styles.pagination}>
                    <Pagination
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        current={currentPage===0?1:currentPage}
                        defaultCurrent={1}
                        defaultPageSize={5}
                        pageSizeOptions={[5, 10, 20, 50]}
                        showTotal={total => `共 ${total} 条`}
                        onChange={this.pageChange}
                        onShowSizeChange={this.pageSizeChange}
                    />
                </div>
                {/* 意见回复弹窗 */}
                <Modal title="意见回复" visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} >
                    <TextArea
                        placeholder="请输入回复内容..."
                        className="custom"
                        style={{ height: 50 }}
                        value={this.state.replyInput}
                        onChange={this.handelReplyChange}
                    />
                </Modal>
                {/* 意见查看弹窗 */}
                <Modal title="意见查看" width={500} footer={null} visible={isModalVisible1} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <Form>
                        <Form.Item label="意见信息">
                            <TextArea
                                value={this.state.optionMessage.opinionInfo}
                                rows={5}
                                disabled
                            />
                        </Form.Item>
                        <Form.Item label="提出者">
                            <Input value={this.state.optionMessage.submitUser} disabled />
                        </Form.Item>
                        <Form.Item label="回复者">
                            <Input value={this.state.optionMessage.handleUser} disabled />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default ArticleListForm;